<template>
  <div class="page-content">
    <el-card>
      <TableBar
        :columns="columns"
        @changeColumn="changeColumn"
        :layout="layout"
      >
        <div slot="top">
          <el-form label-width="120px" :model="searchMap">
            <el-row :gutter="20">
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="供应商：">
                  <el-select
                    v-model="searchMap.supplierName"
                    placeholder="请选择供应商"
                  >
                    <el-option
                      v-for="item in supplierlist"
                      :key="item.id"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="工商登记号：">
                  <el-input
                    v-model="searchMap.businessRegistrationNumber"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="交易品：">
                  <el-input v-model="searchMap.businessScope"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="交易品类型：">
                  <el-input v-model="searchMap.type"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row style="margin-bottom: 5px">
            <el-col :span="3" :offset="21"
              ><el-button
                size="small"
                type="primary"
                @click="fuzzyQuery"
                v-auth="'breed_input_supplier_select'"
                >搜索</el-button
              >
              <el-button
                size="small"
                @click="resetSerch"
                v-auth="'breed_input_supplier_select'"
                >重置</el-button
              ></el-col
            >
          </el-row>
        </div>
        <el-row slot="bottom" :gutter="10" type="flex">
          <el-col :span="7"
            ><el-button
              type="danger"
              size="small"
              plain
              @click="dialogVisible = true"
              v-auth="'breed_input_supplier_insert'"
              >新增</el-button
            ></el-col
          >
          <el-col :span="14"
            ><el-tooltip
              effect="dark"
              content="导入供应商信息"
              placement="top-start"
              ><el-upload
                action="http://120.77.156.205:9603/breed/supplier/excel/add"
                :show-file-list="false"
                ><el-button
                  type="primary"
                  class="el-icon-upload el-icon--right"
                  size="small"
                  v-auth="'breed_input_supplier_update'"
                  @click="refresh"
                  >信息导入</el-button
                ></el-upload
              ></el-tooltip
            ></el-col
          >
          <el-col :span="7"
            ><download-excel
              name="投入品供应商信息.xls"
              :fields="json_fields"
              :fetch="fetchEvent"
            >
              <el-tooltip
                effect="dark"
                content="选择并导出投入品出库信息"
                placement="top-start"
                ><el-button
                  type="primary"
                  size="small"
                  @click="downLoadExcel"
                  v-auth="'breed_input_supplier_insert'"
                  >下载</el-button
                ></el-tooltip
              ></download-excel
            ></el-col
          >
          <el-col :span="7">
            <el-tooltip effect="dark" content="批量删除供应商">
              <el-button
                type="danger"
                size="small"
                v-auth="'breed_input_supplier_delete'"
                class="el-icon-delete-solid"
                @click="removeBatch"
              ></el-button
            ></el-tooltip>
          </el-col>
        </el-row>
      </TableBar>
      <Table
        :columns="columns"
        @fatherMethod="selectEvent"
        ref="tableRef"
        :isSelectAll="isSelectAll"
        :isSearchMap="isSearchMap"
        :searchMap="searchMap"
      />
    </el-card>
    <el-dialog
      title="新增供应商信息"
      :visible.sync="dialogVisible"
      @close="closeEvent"
    >
      <el-form
        :model="addInfo"
        label-width="100px"
        :rules="rules"
        ref="formRef"
      >
        <el-row>
          <el-col :span="12" slot="pre"
            ><el-form-item prop="supplierName" label="供应商名称">
              <el-input
                v-model="addInfo.supplierName"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12" slot="after"
            ><el-form-item prop="supplierShortName" label="供应商简称">
              <el-input
                v-model="addInfo.supplierShortName"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="legalPerson" label="法人代表">
              <el-input v-model="addInfo.legalPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactMethod" label="联系方式">
              <el-input v-model="addInfo.contactMethod"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="contactPerson" label="联系人">
              <el-input v-model="addInfo.contactPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactNumber" label="联系人电话">
              <el-input v-model="addInfo.contactNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="businessScope" label="经营范围">
              <el-input v-model="addInfo.businessScope"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="type" label="企业类型">
              <el-input v-model="addInfo.type"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="businessRegistrationNumber" label="工商注册号">
              <el-input v-model="addInfo.businessRegistrationNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="businessBackupsCode" label="商务部备号">
              <el-input v-model="addInfo.businessBackupsCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="公司简介" prop="introduction">
            <el-input type="textarea" v-model="addInfo.introduction"></el-input>
          </el-form-item>
        </el-row>
        <AddressChoose @fatherMethods="getArea" ref="addressRef" />
        <el-row>
          <el-col :span="20">
            <el-form-item prop="houseNumber" label="详细地址">
              <el-input v-model="addInfo.houseNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="上传微信图片">
          <el-upload
            class="upload-demo"
            drag
            :action="actionUrl"
            :on-success="upLoad"
            multiple
          >
            <i class="el-icon-upload"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSupplier">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Table from "../../components/ProductionManagement/InputSupplier/Table";
import AddressChoose from "../../components/ProductionManagement/public/AddressChoose";
import {
  addSupplierInfo,
  deleteSupplierBatch,
} from "../../Api/productionmanage/supplier_info";
export default {
  name: "InputSupplier",
  components: {
    Table,
    AddressChoose,
  },
  data() {
    return {
      layout: "search, refresh, column",
      //所选择的供应商
      selectList: [],
      selectedData: [],
      isSelectAll: false,
      actionUrl: "http://120.77.156.205:9610/file/upload",
      addInfo: {
        businessBackupsCode: "",
        businessRegistrationNumber: "",
        businessScope: "",
        city: "",
        contactMethod: "",
        contactNumber: "",
        contactPerson: "",
        houseNumber: "",
        introduction: "",
        legalPerson: "",
        picture: "",
        province: "",
        region: "",
        supplierName: "",
        supplierShortName: "",
        type: "",
        wechatOfficialAccountPicture: "",
      },
      dialogVisible: false,
      columns: [
        // 表头数据
        { name: "供应商", show: true, prop: "supplierName" },
        { name: "法人代表", show: true, prop: "legalPerson" },
        { name: "联系人", show: true, prop: "contactPerson" },
        { name: "联系人电话", show: true, prop: "contactMethod" },
        { name: "供应商类型", show: false, prop: "type" },
        { name: "交易商品", show: false, prop: "businessScope" },
      ],
      isSearchMap: false,
      searchMap: {
        businessScope: null,
        businessRegistrationNumber: null,
        supplierName: null,
        type: null,
      },
      json_fields: {
        供应商名称:"supplierName",
        联系人:"contactPerson",
        法人代表:"legalPerson",
        经营范围:"businessScope",
        类型方式:"contactMethod",
        联系号码:"contactNumber",
        商务部备案编码:"businessRegistrationNumber",
        省份:"province",
        市:"city",
        区:"region",
        详细地址:"houseNumber",
        图片:"picture",
        微信公众号图片:"wechatOfficialAccountPicture",
        公司简介:"introduction"
      },
    };
  },
  computed: {
    ...mapState({
      supplylist: (state) => state.productionInfo.ShopSupplyInfo,
      rules: (state) => state.productionInfo.rules,
      supplierlist: (state) => state.productionInfo.suppliersList, //获取商家信息
    }),
  },
  created() {
    this.initData();
  },
  methods: {
    ...mapActions("productionInfo", ["getSuppliersList"]),
    initData() {
      if (!this.supplierlist) {
        this.getSuppliersList();
      }
    },
    changeColumn(newcolumns) {
      console.log(newcolumns);
      this.columns = newcolumns;
    },
    async addSupplier() {
      console.log(this.addInfo);
      const { data: res } = await addSupplierInfo(this.addInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("增加成功");
        this.dialogVisible = false;
        this.refresh();
      }
    },
    refresh() {
      this.$refs.tableRef.getTableData();
    },
    closeEvent() {
      this.$refs.formRef.resetFields();
      this.$refs.addressRef.cleanForm();
    },
    async removeBatch() {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选供应商, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      console.log(this.selectList);
      const { data: res } = await deleteSupplierBatch(this.selectList);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.refresh();
      }
    },
    //获取所要删除的供应商ID
    selectEvent(list) {
      this.selectList = list.map((list) => {
        return list.id;
      });
    },
    downLoadExcel() {
      this.$refs.tableRef.downLoadExcel()
    },
    getArea(obj) {
      this.addInfo.province = obj.province;
      this.addInfo.city = obj.city;
      this.addInfo.region = obj.region;
    },
    upLoad(res) {
      console.log(res);
      let pic = JSON.parse(res);
      this.addInfo.wechatOfficialAccountPicture = pic.url;
    },
    resetSerch() {
      this.isSearchMap = false;
      for (let key in this.searchMap) {
        this.searchMap[key] = '';
      }
      this.$refs.tableRef.getTableData();
    },
    fuzzyQuery() {
      let obj = {};
      // 将用户想要模糊查询的属性写入对象
      for (let key in this.searchMap) {
        if (this.searchMap[key]) {
          obj[key] = this.searchMap[key];
        }
      }
      this.searchMap = obj;
      this.isSearchMap = true;
      this.$refs.tableRef.fuzzyQuery();
    },
    fetchEvent(){
      console.log(this.$refs.tableRef.selectedData);
      return this.$refs.tableRef.selectedData
    },
  },
};
</script>